{% extends 'base.html' %}
{% load static %}

{% block title %}编辑活动 - Meet活动聚{% endblock %}

{% block extra_css %}
<style>
    .form-label {
        position: static !important;
        display: block !important;  /* 确保显示 */
        opacity: 1 !important;     /* 确保不透明 */
        visibility: visible !important; /* 确保可见 */
        margin-bottom: 0.5rem !important; /* 确保有间距 */
    }
    .col-lg-8{
        text-align: left;
    }
    #map-picker {
        height: 400px;
        width: 100%;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    .current-image {
        max-width: 200px;
        border-radius: 8px;
        margin-bottom: 10px;
    }


            .search-container {
            position: relative;
        }

        .search-button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        /* ========== 新增：定位按钮容器样式 ========== */
.location-btn-container {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

/* 定位按钮样式 */
.location-btn {
    background: linear-gradient(135deg, #5a9e51, #4a8c42);
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(90, 158, 81, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 158, 81, 0.4);
    background: linear-gradient(135deg, #4a8c42, #3a7a32);
    color: white;
}

.location-btn:active {
    transform: translateY(0);
}

.location-btn:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white" style="background-color: #198754!important;">
                    <h4 class="mb-0"><i class="bi bi-pencil-square"></i> 编辑活动</h4>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="title" class="form-label">活动标题 *</label>
                            <input type="text" class="form-control" id="title" name="title" value="{{ activity.title }}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">活动描述 *</label>
                            <textarea class="form-control" id="description" name="description" rows="5" required>{{ activity.description }}</textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label for="category" class="form-label">活动分类 *</label>
                            <select class="form-select" id="category" name="category" required>
                                <option value="">请选择分类</option>
                                {% for category in categories %}
                                <option value="{{ category.id }}" {% if activity.category.id == category.id %}selected{% endif %}>{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="start_time" class="form-label">开始时间 *</label>
                                <input type="datetime-local" class="form-control" id="start_time" name="start_time" 
                                       value="{{ activity.start_time|date:'Y-m-d\TH:i' }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="end_time" class="form-label">结束时间 *</label>
                                <input type="datetime-local" class="form-control" id="end_time" name="end_time" 
                                       value="{{ activity.end_time|date:'Y-m-d\TH:i' }}" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="location" class="form-label">活动地点 *</label>
                            <div class="search-container">
                                <input type="text" class="form-control" id="location" name="location" placeholder="请输入地点或在地图上选择" required>
                                <button type="button" class="btn btn-outline-primary search-button" id="search-btn">
                                    <i class="bi bi-search"></i> 搜索
                                </button>
                            </div>
                            <div class="form-text">输入地点后点击搜索按钮或按回车键，地图将同步显示位置</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">地图选点</label>
                            <!-- 居中显示的定位按钮 -->
                            <div class="location-btn-container">
                                <button type="button" class="btn location-btn" id="get-location-btn">
                                    <i class="bi bi-geo-alt"></i> 定位到我的位置
                                </button>
                            </div>
                            <div class="map-container">
                                <div id="map-picker">
                                    <div class="loading-spinner">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">加载地图...</span>
                                        </div>
                                        <span class="ms-2">正在加载地图...</span>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="latitude" name="latitude">
                            <input type="hidden" id="longitude" name="longitude">
                            <small class="text-muted">点击地图选择活动位置，地图将自动显示地名</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="max_participants" class="form-label">最大参与人数 *</label>
                            <input type="number" class="form-control" id="max_participants" name="max_participants" 
                                   value="{{ activity.max_participants }}" min="1" required>
                            <div class="form-text">当前已有 {{ activity.current_participants }} 人报名</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="cover_image" class="form-label">封面图片</label>
                            {% if activity.cover_image %}
                            <div class="mb-2">
                                <p>当前封面图片：</p>
                                <img src="{{ activity.cover_image.url }}" alt="当前封面" class="current-image">
                            </div>
                            {% endif %}
                            <input type="file" class="form-control" id="cover_image" name="cover_image" accept="image/*">
                            <img id="image-preview" class="mt-2" style="max-width: 100%; display: none;">
                        </div>
                        
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle"></i>
                            <strong>重要提示：</strong>
                            {% if activity.status == 'pending' %}
                                活动正在等待审核，编辑后将重新提交审核
                            {% elif activity.status == 'approved' %}
                                活动已通过审核，编辑后需要重新审核才能显示
                            {% elif activity.status == 'rejected' %}
                                活动已被拒绝，请修改后重新提交审核
                            {% else %}
                                活动编辑后需要重新提交审核
                            {% endif %}
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-check-circle"></i> 更新并提交审核
                            </button>
                            <a href="{% url 'activities:activity_detail' activity.id %}" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> 取消
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
            <script>
    // 修复谷歌浏览器中汉堡菜单点击问题
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有汉堡菜单按钮
    const hamburgerButtons = document.querySelectorAll('.rd-navbar-project-hamburger');

    // 为每个按钮添加点击事件监听器（确保使用捕获阶段）
    hamburgerButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();

            // 手动触发切换效果
            const navbarMain = document.querySelector('.rd-navbar-main');
            navbarMain.classList.toggle('active');

            // 处理背景模糊效果
            const navbarWrap = document.querySelector('.rd-navbar-wrap');
            navbarWrap.classList.toggle('blur');
        }, true); // 使用捕获阶段
    });

    // 修复触摸设备兼容性
    hamburgerButtons.forEach(button => {
        button.addEventListener('touchstart', function(e) {
            e.stopPropagation();
            // 触发点击事件
            this.click();
        }, true);
    });
});
    </script>
<!-- 添加百度地图API -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ZZOx4JZUqi6j5ppMMjYmLoXe2Zs7Gb5X"></script>

<script>
    // 图片预览
    document.getElementById('cover_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('image-preview');
                preview.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    });


    
    // 表单验证
    document.querySelector('form').addEventListener('submit', function(e) {
        var startTime = new Date(document.getElementById('start_time').value);
        var endTime = new Date(document.getElementById('end_time').value);
        var now = new Date();
        
        // 验证开始时间
        if (startTime <= now) {
            e.preventDefault();
            alert('开始时间必须晚于当前时间');
            return false;
        }
        
        // 验证结束时间
        if (endTime <= startTime) {
            e.preventDefault();
            alert('结束时间必须晚于开始时间');
            return false;
        }
        
        // 验证最大参与人数
        var maxParticipants = parseInt(document.getElementById('max_participants').value);
        var currentParticipants = {{ activity.current_participants }};
        
        if (maxParticipants < currentParticipants) {
            e.preventDefault();
            alert('最大参与人数不能小于当前已报名人数 (' + currentParticipants + '人)');
            return false;
        }
         // 添加确认提示
        if (!confirm('确定要提交活动进行审核吗？审核通过前活动将不会显示在活动列表中。')) {
            e.preventDefault();
            return false;
        }
    });

    let map = null;
    let marker = null;
    let geocoder = null;
    let localSearch = null;

    // 初始化地图
    function initMap() {
        try {
            console.log("开始初始化百度地图...");

            // 清除加载提示
            document.getElementById('map-picker').innerHTML = '';

            // 初始化百度地图
            map = new BMap.Map("map-picker");

            // 设置默认中心点（河南省郑州市）
            var defaultPoint = new BMap.Point(113.665412, 34.757975);
            map.centerAndZoom(defaultPoint, 13);

            // 启用滚轮缩放
            map.enableScrollWheelZoom(true);

            console.log("百度地图初始化成功");

            // 初始化标记
            marker = new BMap.Marker(defaultPoint);
            map.addOverlay(marker);

            // 初始化地理编码服务
            geocoder = new BMap.Geocoder();

            // 初始化本地搜索服务
            localSearch = new BMap.LocalSearch(map, {
                renderOptions: {map: map, autoViewport: true},
                onSearchComplete: function(results) {
                    // 搜索完成回调
                }
            });

            // 点击地图事件
            map.addEventListener("click", function(e) {
                var pt = e.point;
                var lng = pt.lng;
                var lat = pt.lat;

                console.log('地图点击，经纬度：', lng, lat);

                // 更新标记位置
                marker.setPosition(pt);

                // 更新表单字段
                document.getElementById('latitude').value = lat;
                document.getElementById('longitude').value = lng;

                // 显示加载状态
                document.getElementById('location').value = '正在获取地址...';
                document.getElementById('location').classList.add('address-loading');

                // 逆地理编码获取地址
                reverseGeocode(lng, lat);
            });

            console.log("所有地图服务初始化完成");

            // 尝试获取当前位置
            tryGetCurrentLocation();

        } catch (error) {
            console.error('地图初始化失败：', error);
            document.getElementById('map-picker').innerHTML = '<div class="alert alert-danger">地图加载失败：' + error.message + '</div>';
        }
    }

    // 逆地理编码 - 根据经纬度获取地址
    function reverseGeocode(lng, lat) {
        if (!geocoder) {
            console.error('地理编码服务未初始化');
            setFinalAddress(`位置 (${lng.toFixed(6)}, ${lat.toFixed(6)})`);
            return;
        }

        var pt = new BMap.Point(lng, lat);

        geocoder.getLocation(pt, function(rs) {
            console.log('逆地理编码结果：', rs);

            if (rs) {
                var addComp = rs.addressComponents;
                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

                // 尝试获取更具体的地点名称
                var specificLocation = "";
                if (rs.surroundingPois && rs.surroundingPois.length > 0) {
                    specificLocation = rs.surroundingPois[0].title;
                }

                var fullAddress = specificLocation ? (address + specificLocation) : address;
                setFinalAddress(fullAddress);
                console.log('成功获取地址：', fullAddress);
            } else {
                console.error('逆地理编码失败');
                setFinalAddress(`位置 (${lng.toFixed(6)}, ${lat.toFixed(6)})`);
            }
        });
    }

    // 设置最终地址
    function setFinalAddress(address) {
        document.getElementById('location').value = address;
        document.getElementById('location').classList.remove('address-loading');
    }

    // 尝试获取当前位置
    async function tryGetCurrentLocation() {
        try {
            console.log("尝试获取当前位置...");
            const location = await getCurrentLocation();

            // 移动地图到当前位置
            var point = new BMap.Point(location.longitude, location.latitude);
            map.centerAndZoom(point, location.type === 'ip' ? 11 : 15);

            // 更新标记
            marker.setPosition(point);

            // 更新表单字段
            document.getElementById('latitude').value = location.latitude;
            document.getElementById('longitude').value = location.longitude;

            // 获取当前位置的地址
            reverseGeocode(location.longitude, location.latitude);

            console.log('成功定位到当前位置，类型：', location.type);

        } catch (locationError) {
            console.warn('获取当前位置失败，继续使用默认位置：', locationError.message);
        }
    }

    // 获取当前位置 - 使用IP定位作为备选
    function getCurrentLocation() {
        return new Promise((resolve, reject) => {
            if (!navigator.geolocation) {
                // 如果浏览器不支持定位，使用IP定位
                getLocationByIP().then(resolve).catch(reject);
                return;
            }

            const options = {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0
            };

            navigator.geolocation.getCurrentPosition(
                function(position) {
                    const location = {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        accuracy: position.coords.accuracy,
                        type: 'gps'
                    };
                    console.log('获取到GPS位置：', location);

                    if (isLocationInChina(location.longitude, location.latitude)) {
                        resolve(location);
                    } else {
                        console.warn('GPS定位异常，尝试IP定位');
                        getLocationByIP().then(resolve).catch(reject);
                    }
                },
                function(error) {
                    console.warn('GPS定位失败，尝试IP定位：', error);
                    getLocationByIP().then(resolve).catch(reject);
                },
                options
            );
        });
    }

    // 使用百度地图IP定位
    function getLocationByIP() {
        return new Promise((resolve, reject) => {
            // 使用百度地图的城市定位服务
            var myCity = new BMap.LocalCity();
            myCity.get(function(result) {
                if (result && result.center) {
                    const location = {
                        latitude: result.center.lat,
                        longitude: result.center.lng,
                        accuracy: 5000, // IP定位精度较低
                        type: 'ip', // 标记为IP定位
                        cityName: result.name
                    };
                    console.log('IP定位结果：', location, '城市：', result.name);
                    resolve(location);
                } else {
                    reject(new Error('IP定位失败'));
                }
            });
        });
    }

    // 检查位置是否在中国境内
    function isLocationInChina(longitude, latitude) {
        // 中国的大致边界范围
        const chinaBounds = {
            minLng: 73.66,   // 最西端
            maxLng: 135.05,  // 最东端
            minLat: 18.15,   // 最南端
            maxLat: 53.55    // 最北端
        };

        return longitude >= chinaBounds.minLng &&
               longitude <= chinaBounds.maxLng &&
               latitude >= chinaBounds.minLat &&
               latitude <= chinaBounds.maxLat;
    }

    // 定位到当前位置 - 改进版本
    async function locateToCurrentPosition() {
        try {
            // 显示加载状态
            document.getElementById('get-location-btn').innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> 定位中...';
            document.getElementById('get-location-btn').disabled = true;

            const location = await getCurrentLocation();

            // 移动地图到定位位置
            var point = new BMap.Point(location.longitude, location.latitude);
            map.centerAndZoom(point, location.type === 'ip' ? 11 : 15);

            // 更新标记
            marker.setPosition(point);

            // 更新表单字段
            document.getElementById('latitude').value = location.latitude;
            document.getElementById('longitude').value = location.longitude;

            // 获取地址
            reverseGeocode(location.longitude, location.latitude);

            console.log('定位成功，类型：', location.type);

            // 如果是IP定位，显示提示
            if (location.type === 'ip') {
                setTimeout(() => {
                    alert('当前使用IP定位，定位到：' + (location.cityName || '未知城市') + '\n\n如需精确位置，请确保：\n1. 使用HTTPS访问\n2. 允许浏览器位置权限\n3. 在室外环境使用');
                }, 500);
            }

        } catch (error) {
            console.error('所有定位方式都失败了：', error);
            alert('定位失败：' + error.message + '\n\n请手动在地图上选择位置，或使用搜索功能定位。');
        } finally {
            // 恢复按钮状态
            document.getElementById('get-location-btn').innerHTML = '<i class="bi bi-geo-alt"></i> 定位到我的位置';
            document.getElementById('get-location-btn').disabled = false;
        }
    }

    // 搜索地点
    function searchPlace(keyword) {
        if (!keyword.trim()) {
            alert('请输入搜索关键词');
            return;
        }

        console.log('开始搜索地点：', keyword);

        // 显示加载状态
        document.getElementById('search-btn').innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> 搜索中';
        document.getElementById('search-btn').disabled = true;

        // 设置超时保护
        const searchTimeout = setTimeout(() => {
            console.log('搜索超时');
            resetSearchButton();
            alert('搜索超时，请重试');
        }, 10000);

        // 使用百度地图本地搜索
        localSearch.search(keyword);

        // 监听搜索完成事件
        localSearch.setSearchCompleteCallback(function(results) {
            clearTimeout(searchTimeout);
            resetSearchButton();

            if (localSearch.getStatus() === BMAP_STATUS_SUCCESS) {
                var firstResult = results.getPoi(0);
                if (firstResult) {
                    var point = firstResult.point;
                    var title = firstResult.title;
                    var address = firstResult.address;

                    console.log('找到地点：', title, '经纬度：', point.lng, point.lat);

                    // 移动地图中心
                    map.centerAndZoom(point, 16);

                    // 更新标记
                    marker.setPosition(point);

                    // 更新表单字段
                    document.getElementById('latitude').value = point.lat;
                    document.getElementById('longitude').value = point.lng;
                    document.getElementById('location').value = title;

                } else {
                    alert('未找到相关地点，请尝试其他关键词');
                }
            } else {
                alert('搜索失败，请重试');
            }
        });
    }

    // 恢复搜索按钮状态
    function resetSearchButton() {
        document.getElementById('search-btn').innerHTML = '<i class="bi bi-search"></i> 搜索';
        document.getElementById('search-btn').disabled = false;
    }

    // 重置地图到默认位置
    function resetMapToDefault() {
        var defaultPoint = new BMap.Point(113.665412, 34.757975);
        map.centerAndZoom(defaultPoint, 13);
        marker.setPosition(defaultPoint);

        // 清空表单字段
        document.getElementById('latitude').value = '';
        document.getElementById('longitude').value = '';
        document.getElementById('location').value = '';
    }

    // 页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM加载完成，开始初始化百度地图...');

        // 直接初始化百度地图
        setTimeout(initMap, 100);

        // 定位按钮点击事件
        document.getElementById('get-location-btn').addEventListener('click', function() {
            locateToCurrentPosition();
        });

        // 搜索按钮点击事件
        document.getElementById('search-btn').addEventListener('click', function() {
            var keyword = document.getElementById('location').value.trim();
            searchPlace(keyword);
        });

        // 输入框回车事件
        document.getElementById('location').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                var keyword = this.value.trim();
                searchPlace(keyword);
            }
        });

        // 图片预览功能
        document.getElementById('cover_image').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('image-preview');
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        // 表单提交验证
        document.getElementById('activity-form').addEventListener('submit', function(e) {
            var latitude = document.getElementById('latitude').value;
            var longitude = document.getElementById('longitude').value;

            if (!latitude || !longitude) {
                e.preventDefault();
                alert('请在地图上选择活动位置或通过搜索确定位置');
                return false;
            }
        });

        // 添加重置地图按钮事件（如果页面有重置按钮）
        var resetBtn = document.getElementById('reset-map-btn');
        if (resetBtn) {
            resetBtn.addEventListener('click', resetMapToDefault);
        }
    });
    // 初始化地图
    {#initMap();#}
</script>
{% endblock %}